<template>
  <div class="home-container">
    <el-card shadow="hover" class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎使用轻客管家系统</span>
        </div>
      </template>
      <div class="welcome-content">
        <h2>系统概况</h2>
        <div class="stats-container">
          <el-statistic 
            v-for="stat in statistics" 
            :key="stat.title"
            :title="stat.title"
            :value="stat.value"
            class="stat-item"
          />
        </div>
        <div class="recent-activity">
          <h3>最近活动</h3>
          <el-timeline>
            <el-timeline-item 
              v-for="(activity, index) in activities" 
              :key="index"
              :timestamp="activity.time"
              type="success"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 统计数据
const statistics = ref([
  { title: '总线索数', value: 1528 },
  { title: '商机数量', value: 368 },
  { title: '客户数量', value: 125 },
  { title: '课程数量', value: 56 }
])

// 最近活动
const activities = ref([
  { time: '2025-02-01 09:30', content: '新建了Java基础班课程' },
  { time: '2025-01-31 15:45', content: '分配了新的销售线索' },
  { time: '2025-01-30 11:20', content: '完成了月度销售报告' },
  { time: '2025-01-29 16:10', content: '添加了新的客户信息' }
])
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-content {
  padding: 20px 0;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

.stat-item {
  background-color: #fafafa;
  padding: 20px;
  border-radius: 8px;
}

.recent-activity {
  margin-top: 40px;
}

.recent-activity h3 {
  margin-bottom: 20px;
  color: #303133;
}
</style>
